<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/index_nav.css">
    <link rel="stylesheet" href="../iconfont/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/shop_cart.css">
</head>

<body>
    <!-- 首页导航栏 -->
    <nav class="index_nav">
        <div class="index_nav_center">
            <ul class="left_nav">
                <li class="first_menu_li">
                    <i class="fa fa-home"></i>
                    <a class="first_menu" href="../html/index.html">
                        返回首页
                    </a>
                </li>
                <li class="first_menu_li">
                    <a class="first_menu" href="">
                        网站导航
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="left_nav_secont_menu site_map">
                        <li class="close">
                            <i class=" fa fa-close"></i>
                        </li>
                        <li>
                            <dl>
                                <dt>特色购物</dt>
                                <dd>
                                    <p>
                                        <a href="">苏宁互联</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁达人</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁卡</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁国际</a>
                                    </p>
                                    <p>
                                        <a href="">易回收</a>
                                    </p>
                                    <p>
                                        <a href="">二手优品</a>
                                    </p>
                                    <p>
                                        <a href="">领券中心</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁Outlets</a>
                                    </p>
                                    <p>
                                        <a href="">导购指南</a>
                                    </p>
                                    <p>
                                        <a href="">江苏馆</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>主题频道</dt>
                                <dd>
                                    <p>
                                        <a href="">电器城</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁超市</a>
                                    </p>
                                    <p>
                                        <a href="">手机</a>
                                    </p>
                                    <p>
                                        <a href="">运动馆</a>
                                    </p>
                                    <p>
                                        <a href="">图书</a>
                                    </p>
                                    <p>
                                        <a href="">红孩子母婴</a>
                                    </p>
                                    <p>
                                        <a href="">美妆个护</a>
                                    </p>
                                    <p>
                                        <a href="">电脑</a>
                                    </p>
                                    <p>
                                        <a href="">服装城</a>
                                    </p>
                                    <p>
                                        <a href="">智能生活</a>
                                    </p>
                                    <p>
                                        <a href="">家装馆</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁汽车</a>
                                    </p>
                                    <p>
                                        <a href="">排行榜</a>
                                    </p>
                                    <p>
                                        <a href="">医药馆</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>生活助手</dt>
                                <dd>
                                    <p>
                                        <a href="">零钱宝</a>
                                    </p>
                                    <p>
                                        <a href="">手机充值</a>
                                    </p>
                                    <p>
                                        <a href="">转账还款</a>
                                    </p>
                                    <p>
                                        <a href="">约服务</a>
                                    </p>
                                    <p>
                                        <a href="">水电煤</a>
                                    </p>
                                    <p>
                                        <a href="">保险</a>
                                    </p>
                                    <p>
                                        <a href="">机票</a>
                                    </p>
                                    <p>
                                        <a href="">酒店</a>
                                    </p>
                                    <p>
                                        <a href="">工业品</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>会员联盟</dt>
                                <dd>
                                    <p>
                                        <a href="">会员联盟</a>
                                    </p>
                                    <p>
                                        <a href="">延长保修</a>
                                    </p>
                                    <p>
                                        <a href="">易付宝</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁理财</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁金融</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>更多热点</dt>
                                <dd>
                                    <p>
                                        <a href="">PP视频</a>
                                    </p>
                                    <p>
                                        <a href="">合作招商</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁联盟</a>
                                    </p>
                                    <p>
                                        <a href="">用户体验</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁云</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁足球</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁公益</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁有货</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </li>
                <li class="first_menu_li">
                    <a class="first_menu" href="">
                        商家入驻
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="left_nav_secont_menu tenants">
                        <li class="spical_shop">
                            <dl>
                                <dd>
                                    <p>
                                        <a href="">合作招商</a>
                                    </p>
                                    <p>
                                        <a href="">服务市场</a>
                                    </p>
                                    <p>
                                        <a href="">金融中心</a>
                                    </p>
                                    <p>
                                        <a href="">培训中心</a>
                                    </p>
                                    <p>
                                        <a href="">易通天下</a>
                                    </p>
                                    <p>
                                        <a href="">规则中心</a>
                                    </p>
                                    <p>
                                        <a href="">规则众议院</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </li>
                <li class="first_menu_li">
                    <a class="first_menu" href="">
                        客户服务
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="left_nav_secont_menu customer_service">
                        <li class="spical_shop">
                            <dl>
                                <dd>
                                    <p>
                                        <a href="">苏宁帮客</a>
                                    </p>
                                    <p>
                                        <a href="">帮助中心</a>
                                    </p>
                                    <p>
                                        <a href="">退换/维修</a>
                                    </p>
                                    <p>
                                        <a href="">意见反馈</a>
                                    </p>
                                    <p>
                                        <a href="">30天包退</a>
                                    </p>
                                    <p>
                                        <a href="">省心购</a>
                                    </p>
                                    <p>
                                        <a href="">在线咨询</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </li>

            </ul>
            <ul class="right_nav">
                <li class="common_nav_li right_nav_li please_login">
                    <a class="right_nav_word please_replace_login" href="../html/login.html">
                        请登录
                    </a>
                </li>
                <li class="common_nav_li nav_imp right_nav_li please_register">
                    <a class="right_nav_word " href="">
                        注册有礼
                    </a>
                </li>
                <li class="right_nav_li">
                    <a class="right_nav_word" href="">
                        我的订单
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="right_nav_secont_menu my_order">
                        <li>
                            <dl>
                                <dd>
                                    <p>
                                        <a href="">待支付</a>
                                    </p>
                                    <p>
                                        <a href="">待收货</a>
                                    </p>
                                    <p>
                                        <a href="">待评价</a>
                                    </p>
                                    <p>
                                        <a href="">修改订单</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </li>
                <li class="right_nav_li">
                    <a class="right_nav_word" href="">
                        我的易购
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="right_nav_secont_menu easy_buy">
                        <li>
                            <dl>
                                <dt>
                                    <p>
                                        <img src="../img/tool-logo.png" alt="">
                                    </p>
                                    <a href="">请登录</a>
                                </dt>
                                <dd>
                                    <p>
                                        <a href="">我的消息</a>
                                    </p>
                                    <p>
                                        <a href="">我的关注</a>
                                    </p>
                                    <p>
                                        <a href="">我的金融</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁会员</a>
                                    </p>
                                    <p>
                                        <a href="">我的任性付</a>
                                    </p>
                                    <p>
                                        <a href="">我的优惠券</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </li>
                <li class="common_nav_li right_nav_li">
                    <a class="right_nav_word" href="">
                        苏宁会员
                    </a>
                </li>
                <li class="nav_imp shop_car right_nav_li">
                    <a class="right_nav_word" href="">
                        <i class="fa fa-shopping-cart"></i>
                        购物车
                        <span>0</span>
                        <i class="fa fa-angle-down"></i>
                        <ul class="right_nav_secont_menu shop_car shop_car_menu">
                            <li>
                                <dl>
                                    <dt>
                                        <p>
                                            <img src="../img/shop_car.png" alt="">
                                        </p>
                                    </dt>
                                    <dd class="shop_car_first_line">
                                        不要让您的购物车空着哦，快去逛逛吧
                                    </dd>
                                    <dd class="shop_car_second_line">
                                        如果您已添加过宝贝，那就赶紧登录查看吧
                                    </dd>
                                    <dd class="login_btn">
                                        <span>登录</span>
                                    </dd>
                                </dl>
                            </li>
                        </ul>
                    </a>
                </li>
                <li class="common_nav_li right_nav_li">
                    <a class="right_nav_word" href="">
                        易付宝
                    </a>
                </li>
                <li class="common_nav_li right_nav_li">
                    <a class="right_nav_word" href="">
                        企业采购
                    </a>
                </li>
                <li class="right_nav_li">
                    <a class="right_nav_word" href="">
                        手机苏宁
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="right_nav_secont_menu mobile_suning">
                        <li>
                            <dl>
                                <dt>
                                    <p>
                                        <img src="../img/sn_download.jpg" alt="">
                                    </p>
                                </dt>
                                <dd>
                                    <p>
                                        扫一扫
                                    </p>
                                    <p>
                                        下载苏宁易购APP
                                    </p>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <p>
                                        <img src="../img/sn_download.jpg" alt="">
                                    </p>
                                </dt>
                                <dd>
                                    <p>
                                        关注苏宁推客公众号
                                    </p>
                                    <p>
                                        自购省钱·分享赚钱
                                    </p>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <p>
                                        <img src="../img/sn_download.jpg" alt="">
                                    </p>
                                </dt>
                                <dd>
                                    <p>
                                        扫一扫
                                    </p>
                                    <p>
                                        下载苏宁金融APP
                                    </p>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <p>
                                        <img src="../img/sn_download.jpg" alt="">
                                    </p>
                                </dt>
                                <dd>
                                    <p>
                                        扫一扫
                                    </p>
                                    <p>
                                        关注苏宁易购服务号
                                    </p>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 版心区域 -->
    <section class="section_center">
        <!-- 广告位 -->
        <div class="advertising">
            <img src="http://image.suning.cn/uimg/aps/material/155904346710465225.jpg" alt="">
        </div>
        <!-- 购物车头部 -->
        <div class="shop_cart_header">
            <div class="shop_cart_logo">
                <img src="../img/login_header_logo.png" alt="">
            </div>
            <div class="shop_cart_search_inp">
                <div class="search_box">
                    <i></i>
                    <input type="text">
                </div>
                <div class="search_btn">搜索</div>
            </div>
        </div>
        <!-- 送货地址部分 -->
        <p class="distribution">
            送货至: 北京-东城区-全区
        </p>
        <!-- 购物车部分 -->
        <div class="cart_wrapper">
            <div class="cart_main_header">
                <div class="cart_th cart_chk">
                    <input type="checkbox" class="cart_choose_all">
                    <span>全选</span>
                </div>
                <div class="cart_th name_title">
                    商品信息
                </div>
                <div class="cart_th specification_title">
                    规格
                </div>
                <div class="cart_th price_title">
                    单价（元）
                </div>
                <div class="cart_th number_title">
                    数量
                </div>
                <div class="cart_th subtotal_title">
                    小计
                </div>
                <div class="cart_th operation_title">
                    操作
                </div>
            </div>
            <div class="shop_body">
                <div class="m_store">
                    <div class="store_title">
                        <div class="store_title_left">
                            <input class="choose_my_store" type="checkbox" name="" id="">
                            <span class="store-name"> 苏宁自营</span>
                        </div>
                        <div class="store_title_right">
                            <span>运费:</span>
                            <i>￥</i>
                            <em>0.00</em>
                        </div>
                    </div>
                    <div class="purchase_information">
                        <div class="pur_info_main">
                            <!-- <div class="col_check">
                                <input type="checkbox" class="choose_this" name="" id="">
                            </div>
                            <div class="col_goods_msg">
                                <div class="item_pic">
                                    <a href="javascript:void(0)">
                                        <img src="//imgservice.suning.cn/uimg1/b2c/image/nvottb1p1SyVAyJBiJjIsQ.jpg_100w_100h_4e"
                                            alt="">
                                    </a>
                                </div>
                                <div class="item_name">
                                    <a href="javascript:void(0)">
                                        【官方授权】任天堂switch握把 Power A马力欧收藏版握把 马里奥握把
                                    </a>
                                </div>
                            </div>
                            <div class="col_specs">
                                <div class="specs_line">
                                    <p>配件：【手柄握把】马力欧收藏版</p>
                                </div>
                            </div>
                            <div class="col_price">
                                <div class="price_line">
                                    <span>
                                        <i>￥</i>
                                        <em>98.00</em>
                                    </span>
                                </div>
                            </div>
                            <div class="col_amount">
                                <div class="item_amount">
                                    <button class="amount_reduction">-</button>
                                    <input type="text" class="amount_inp" value="1">
                                    <button class="amount_add">+</button>
                                </div>
                            </div>
                            <div class="col_sum">
                                <p class="shop_price">
                                    <i>￥</i>
                                    <span>196.00</span>
                                </p>
                            </div>
                            <div class="col_del">
                                <a href="javascript:void(0)">删除</a>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="settlement">
                <div class="settlement_left">
                    <div class="choose_all_del">
                        <input type="checkbox" class="del_check" name="" id="">
                        <span class="check_label">全选</span>
                        <span class="del_your_choose">删除选中商品</span>
                    </div>
                </div>
                <div class="settlement_right">
                    <div class="cart_collect">
                        <div class="save_ship">
                            <div class="selected_prods">
                                <div class="alchoose">
                                    <a class="now_sale_goods" href="javascript:void(0)">
                                        已选商品
                                        <i class="num_color">0</i>
                                        件
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="cart_total_price">
                            <div class="split">

                            </div>
                            <div class="sn_sum_price">
                                <div class="cart-sum-price">
                                    <span>总价（含运费）：</span>
                                    <b>
                                        <i>￥</i>
                                        <em>0.00</em>
                                    </b>
                                </div>
                            </div>
                            <p class="cart-extra-price">
                                运费（以结算页为准 :
                                <span>
                                    <i>￥</i>
                                    <em>0.00</em>
                                </span>
                            </p>
                        </div>
                        <div class="pay_for">
                            <a href="javascript:void(0)">去结算</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="../js/libs/jQuery.min.js"></script>
    <script src="../js/shop_car.js"></script>
</body>

</html>